<template>
  <!-- 关联模版参数 表单 -->
  <a-modal
    v-model:open="visible"
    :title="`关联模版参数-${rowData?.name}`"
    @ok="handleOk"
    class="addStation"
    destroyOnClose
    :width="900"
    @cancel="cancel"
    centered
  >
    <a-form
      :model="form"
      :rules="rules"
      layout="inline"
      :labelCol="labelCol"
      ref="formRef"
    >
      <a-form-item label="模版参数名称：" name="modelParamId">
        <a-select
          v-model:value="form.modelParamId"
          show-search
          placeholder="请搜索"
          style="width: 720px"
          :default-active-first-option="false"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          @search="debouncedSearch"
        >
          <a-select-option v-for="item in searchList" :key="item.id">
            <span>{{item.modelName}}：{{item.attrName}}</span>
            <span class="searchName">{{item.name}}</span>
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确认</a-button
        >
      </div>
    </template>
  </a-modal>
</template>
<script setup>


import { debounce } from "lodash-es";
const $api = inject("$api");
const props = defineProps({
  connectParamVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
});
const visible = ref(props.connectParamVisible);
const emits = defineEmits(["update:connectParamVisible", "getParamCodePage"]);
watch(
  () => props.connectParamVisible,
  (val) => {
    visible.value = val;
  }
);
const labelCol = { style: { width: "120px" } };
const formRef = ref(null);
const form = ref({
  modelParamId: undefined,
});
const searchList = ref([]);
const rules = ref({
  modelParamId: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
});
const cancel = () => {
  emits("update:connectParamVisible", false);
  form.value = {
    modelParamId: undefined,
  };
  searchList.value = [];
  formRef.value.clearValidate();
};
const handleSearch = async (value) => {
  const res = await $api.modelParamList({
    name: value,
  });
  searchList.value = res.data.map((item) => {
    return {
      ...item,
      label: item.name,
      value: item.id,
    };
  });
};
const debouncedSearch = debounce(handleSearch, 300);

const handleSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      const params = {
        paramCodeId: props.rowData.id,
        modelParamId: form.value.modelParamId,
      };
      const res = await $api.paramCodeRelate(params);
      if (res && res.code === 0) {
        message.success("关联成功");
        cancel();
        emits("getParamCodePage");
      }
    })
    .catch((error) => {
      console.log("error", error);
    });
};
</script>

<style lang="less" scoped>
.form {
  padding: 0 40px;
  margin-top: 30px;
}
.ant-form-item {
  margin-top: 20px;
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
.searchName{
  float: right;
}
</style>